{% block main_body %} 
  <div id="shadow"></div>
  <div id='content'>    
    <div id="hide_comments"><img src="images/hide.png" alt="Skryt"/></div>            
    {% if gallery.getCurrentPhoto.parent -%}
    <div id="detail_close">  
	<a href = "?album={{gallery.getCurrentPhoto.getParent.getPath}}" class="nav"><img src="images/close.png" alt="Zavri"/></a>
    </div>      
    {%- endif -%}	
     
    <div id='image' class='detail'>      
      
      <div id='nav_left'>
        {%- if gallery.getPreviousPhoto  -%}
          <a href="?detail={{gallery.getPreviousPhoto.getPath}}" class="nav" id="previous_photo"> <img src="images/previous.png" alt="Predošlá"/></a>
        {%- endif %}

        {% for i in gallery.getPhotos -%}
          {% if loop.index > gallery.getCurrentPhotoIndex-5 and loop.index <= gallery.getCurrentPhotoIndex+6 %}
            {% if i.getId == gallery.getCurrentPhoto.getId %}	      
	      </div>
	      <div id="nav_right">
	      {% if gallery.getNextPhoto -%}
		<a href = "?detail={{gallery.getNextPhoto.getPath}}" class="nav" id="next_photo"> <img src="images/next.png" alt="Nasledujúca"/></a>
	      {%- endif %}  
            {% else %}
	      <div class="nav_num">
		<a href="?detail={{i.getPath}}" class="nav">{{loop.index}}</a>
	      </div>
            {%- endif -%}
          {%- endif -%}
        {%- endfor %}        
      </div>     
      <div id="image_frame">      
	<img id="photo_img" src="getimage.php?w=800&amp;h=600&amp;image={{gallery.CurrentPhoto.Path}}"/>      
      </div>      
      <div id="photo_caption_bar">
	<div id="photo_count">
	  {{gallery.getCurrentPhotoIndex+1}} z {{gallery.getPhotoCount}}
	</div>
	
	<div id='rating'>	  
	  {%if login -%}
	  <script type='text/javascript' src='js/rating.js'></script>  
	  {% for i in 1..5 -%}
	    <a href="?detail={{gallery.getCurrentPhoto.getPath}}&amp;rate={{i}}"><img src="images/star_white.png" alt="{{i}}" class="rating" onMouseOver="ratingOver(this,true)" onMouseOut="ratingOver(this,false)"/></a>
	  {%- endfor %}
	  {%- endif %}
	  {#<span class='rating'>{{gallery.getCurrentPhoto.getRating }}</span>#}
	</div>

	<div id='photo_caption'>
	  <strong> {{gallery.getCurrentPhoto.getCaption}} </strong>
	</div>
      </div>
    </div>    
    <div id='comments' class='detail'>
      <div id='comment_title'>
        Komentáre:
      </div>
      {% include 'parts/comments.htm' %}
    </div>
  </div>

  <script type="text/javascript" >
    key_capture_enabled = true;
    $('body').keyup(function(event) {
      if(key_capture_enabled)
      {
        /*39 - right
        37 - left*/
        if(event.keyCode==37 && $('#previous_photo').length>0)
        {        
          location.href = ($('#previous_photo').attr("href"));
        }
        if(event.keyCode==39 && $('#next_photo').length>0)
        {
          location.href = ($('#next_photo').attr("href"));
        }
      }
    }); 
    $('textarea').focus(function() {
      if(key_capture_enabled)
      {
        key_capture_enabled = false;
      }
    });

    $('textarea').blur(function() {
      if(!key_capture_enabled)
      {
        key_capture_enabled = true;
      }
    });

    comments_hidden = false;
    $('#hide_comments').click(function(event) {      
      if(!comments_hidden)
      {
        $('#comments').css('visibility','hidden');
        $('#image').css('margin','0');    	
	$('#hide_comments').html('<img src="images/show.png" alt="Zobraziť"/>');    
	$('#hide_comments').css('right','0');   
	$('#detail_close').css('margin-right','26px');   
	comments_hidden = true;
      }
      else
      {
	$('#comments').css('visibility','visible');
        $('#image').css('margin-right','236px');    
	$('#hide_comments').html('<img src="images/hide.png" alt="Skryť"/>');    
	$('#hide_comments').css('right','236px');
	$('#detail_close').css('margin-right','262px');   
	comments_hidden = false;
      }      
    });

    //resize_image
    
    //$('#photo_img').height($('body').height()-$('#photo_caption_bar').height()-6);
  </script>
 
{% endblock -%}
